<template>
    <div class="adminmanagement">
        <div class="admin_header">
            <div class="administrator_header">
                <div class="ax_default box_2" id="u9509">
                    <div id="u9509_div"></div>
                </div>
                <span class="header_words">管理员管理</span>
            </div>
            <div class="header_btn">
                <el-row>
                    <el-button type="primary" plain @click="delUsers">删除</el-button>
                    <el-button type="primary" @click="$event => handleEdit()">新增管理员</el-button>
                </el-row>
            </div>

        </div>
        <div class="admin_list">
            <div class="input_header">
                <el-row class="header_put">
                    <el-input v-model="keyword" placeholder="请输入账号" class="head_input"></el-input>
                    <el-button type="primary" class="input_btn">搜索</el-button>
                </el-row>

            </div>
            <!-- table表格 -->
            <div class="list_item">
                <!-- <el-form ref="ruleForm" :model="ruleForm"> -->
                <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    tooltip-effect="dark" @selection-change="(selections) => { changeCheck(selections) }"
                    style="width: 100%">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="userName" label="用户名" align="center">
                    </el-table-column>
                    <el-table-column prop="account" label="账号" align="center">
                    </el-table-column>
                    <el-table-column prop="role" label="角色" align="center">
                        <template slot-scope="scope">
                            <div>
                                <!-- {{ scope.row.role }} -->
                                <p>{{ scope.row.role == 1 ? '超级管理员' : scope.row.role == 2 ? '医生' : '护士' }}</p>
                            </div>
                        </template>

                    </el-table-column>
                    <el-table-column prop="phone" label="手机号码" align="center">
                    </el-table-column>
                    <el-table-column prop="isChecked" label="是否启用" align="center">
                        <template slot-scope="scope">
                            <el-switch @change="changeSwitch(scope.row.id)" v-model="scope.row.isChecked"
                                active-color="#1890FF" inactive-color="#A9A8A8" />
                        </template>
                    </el-table-column>

                    <el-table-column prop="addDate" label="添加时间" align="center">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" align="center" width="150">
                        <div class="list_img" slot-scope="{row}">
                            <div @click="reviseAdmin(row.id)"><img src="../../../img/systemsettings/u8010 (1).svg" alt="">
                            </div>
                            <div @click="$event => handleDelete(row.id)"><img src="../../../img/systemsettings/u8011.svg"
                                    alt=""></div>
                        </div>
                    </el-table-column>
                </el-table>

                <!-- </el-form> -->

            </div>
            <!-- 底部分页 -->
            <div class="list_bottom">
                <div class="botton_page">
                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :page-sizes="[10, 20, 30, 40, 50]" :current-page="currentPage" :page-size="pagesize"
                        layout="total, prev, pager, next, sizes, jumper" :total="tableData.length" class="boder">
                    </el-pagination>
                    <el-row>
                        <el-button plain class="page_btn">确定</el-button>
                    </el-row>
                </div>
            </div>

        </div>
        <div class="admin_footer">
            <p><span> © 2021 七尾原型工作室</span></p>
        </div>

    </div>
</template>
<script>
import { getUserList, delUserData, updataRevise } from '@/api/systemsettings'
import { prompt } from '@/utils/tools'
export default {
    name: 'Adminlist',
    data() {
        return {
            input: '',
            // 分页器
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4,
            multipleSelection: [],
            currentPage: 1,
            currentIndex: '',
            pagesize: 10,
            ruleForm: {

            },
            role: {

            },
            // 搜索
            keyword: '',
            // 数据库
            doctorList: [],

            checkedArr: []  // 选中用户的数组


        }

    },
    methods: {
        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.currentPage = 1;
            this.pagesize = val;
        },
        // 显示当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.currentPage = val;
        },


        //   获取列表
        async gettableData() {
            const _res = await getUserList();
            // console.log(_res);
            this.doctorList = _res.data;

            // console.log(this.doctorList);
        },

        handleEdit() {
            // 切换到编辑页面
            this.$router.push({
                path: '/addnewadmin',
            })
        },
        // 编辑信息
        reviseAdmin(id) {
            let _obj
            _obj = this.doctorList.filter(item => {
                return item.id == id
            })
            // console.log(_obj);
            this.$router.push({
                path: '/addnewadmin',
                query: {
                    type: 'updata',
                    obj: _obj[0]
                }
            })
        },
        // 点击单选框
        changeCheck(selection) {
            this.checkedArr = selection
        },
        // 删除已选择的用户
        async delUsers() {
            // console.log(id);
            let _table
            try {
                _table = await prompt('是否确认删除', '删除提示');

            } catch (error) {
                _table = error
            }

            if (_table == 'confirm') {
                try {
                    this.checkedArr.forEach(async item => {
                        console.log(item.id);
                        await delUserData(item.id)
                    })
                } catch (error) {
                    // console.log(error);
                }
            }
            this.gettableData()
            this.gettableData()
        },
        // 用户 点击开关状态
        async changeSwitch(id) {
            this.doctorList.filter(item => {
                item.id == id ? !item.isChecked : item.isChecked
            })
            let _obj = this.doctorList.filter(item => {
                return item.id == id
            })
            await updataRevise(id, _obj[0])
        },
        // 删除
        async handleDelete(id) {
            // console.log(id);

            let _table
            try {
                _table = await prompt('是否确认删除', '删除提示');

            } catch (error) {
                _table = error
            }

            if (_table == 'confirm') {
                try {
                    console.log(id);
                    await delUserData(id)

                } catch (error) {
                    // console.log(error);
                }
            }

            this.gettableData()
        },


    },
    async created() {
        this.gettableData()
    },
    computed: {
        // 搜索框失去焦点搜索关键字
        tableData() {
            let _doctor = this.doctorList.filter(list => {
                return !list.isdelete
            })
            // 判断搜索条件是否存在
            if (this.keyword) {
                _doctor = _doctor.filter(doc => {
                    return doc.userName.indexOf(this.keyword) >= 0;
                })
            }
            return _doctor;
        }


    }


}
</script>
<style lang="scss" scoped>
.adminmanagement {
    margin: 0 auto;
}

.head_input {
    width: 300px;
}

.admin_header {
    display: flex;
    justify-content: space-between;
}

.administrator_header {
    display: flex;
    align-items: center;
}

#u9509 {
    border-width: 0px;
    width: 24px;
    height: 8px;
    display: flex;
    font-size: 16px;
    color: #006EFF;

}

#u9509_div {
    border-width: 0px;
    width: 24px;
    height: 8px;
    background: inherit;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #006EFF;
}

.header_words {
    margin-left: 20px;
    font-size: 24px;
}

.input_header {
    display: flex;
}

.header_put {
    display: flex;
    align-items: center;
}

.admin_list {
    border-radius: 10px;

    box-shadow: 0 0 20px #ccc;
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
}

.input_btn {
    margin-left: 10px;
    height: 35px;
    padding: 0 15px;
}

.list_item {
    display: flex;

}

.table_list {
    text-align: center;
}

.list_img {
    display: flex;
    justify-content: space-around;
}



.list_bottom {
    position: relative;
    // margin: 30px 0;
    margin-top: 20px;
    margin-bottom: 50px;
}

.botton_page {
    display: flex;

    position: absolute;
    right: 0;
    // margin-left: 100px;
}

// .page_btn{
//     border: 1px solid #006EFF;
//     width: 30px;
//     height: 12px;
//     font-size: 14px;
//     line-height: 12px;
//     // text-align: center;
// }
.page_btn {
    padding: 6px 10px;
}

.admin_footer {
    height: 64px;
    line-height: 64px;
}

.admin_footer p {
    text-align: center;
    font-size: 12px;
    color: #ccc;
}

.admin_footer p span:hover {
    cursor: pointer;
    color: rgb(0, 110, 255);
}
</style>